import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import Constant from '../../../../utils/Constant'//全局变量

const screenW = Dimensions.get('window').width;

export default class CarReportBox extends Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    };

    render() {
        if ((this.props.reportPic || this.props.reportPcUrl || this.props.reportPdf) || (this.props.detectionReportPic || this.props.detectionReportUrl || this.props.detectionReportPdf)) {
            return (
                <View style={styles.carReportBox}>
                    {
                        this.props.reportPic || this.props.reportPcUrl || this.props.reportPdf ?
                            <TouchableOpacity
                                style={styles.itemContainer}
                                onPress={() => {
                                    this.clickWeibao()
                                }}>
                                <Image style={styles.itemImg} source={require('source/image/weibao2_icon.png')} />
                                <View style={styles.itemDesBox}>
                                    <Text style={styles.itemTitleText}>维保记录</Text>
                                    <Text style={styles.itemDesText}>点击查看维保报告</Text>
                                </View>
                            </TouchableOpacity>
                            :
                            null
                    }
                    {
                        (this.props.reportPic || this.props.reportPcUrl || this.props.reportPdf) && (this.props.detectionReportPic || this.props.detectionReportUrl || this.props.detectionReportPdf) ?
                            <View style={styles.sepLine} />
                            :
                            <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                    }
                    {
                        this.props.detectionReportPic || this.props.detectionReportUrl || this.props.detectionReportPdf ?
                            <TouchableOpacity
                                style={styles.itemContainer}
                                onPress={() => {
                                    this.clickDetection()
                                }}>
                                <Image style={styles.itemImg} source={require('source/image/detection2_icon.png')} />
                                <View style={styles.itemDesBox}>
                                    <Text style={styles.itemTitleText}>检测报告</Text>
                                    <Text style={styles.itemDesText}>点击查看检测报告</Text>
                                </View>
                            </TouchableOpacity>
                            :
                            null
                    }
                </View>)
        } else {
            return (
                null
            )
        }
    }

    clickWeibao() {
        console.log('this.props.vcode = ', this.props.vcode)
        this.props.navigation.navigate('CarFoursReportPage', { vcode: this.props.vcode })
    }

    clickDetection() {
        // let url = ''
        // if (this.props.detectionReportPdf) {
        //     url = this.props.detectionReportPdf
        // } else if (this.props.detectionReportUrl) {
        //     url = this.props.detectionReportUrl
        // } else if (this.props.detectionReportPics) {
        //     url = '/detectionReport?carId='+this.props.carId
        // }
        // this.props.navigation.navigate('WebView', { source: url, title: '报告详情' })
        this.props.navigation.navigate('CarDetectionReportPage', { vcode: this.props.vcode })
    }

}

const styles = StyleSheet.create({
    carReportBox: {
        marginTop: 10,
        marginHorizontal: 8,
        height: 53,
        borderRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
    },
    itemContainer: {
        height: '100%',
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingLeft: 14
    },
    itemImg: {
        width: 24,
        height: 24
    },
    itemDesBox: {
        marginLeft: 6
    },
    itemTitleText: {
        fontSize: 14,
        fontWeight: "bold",
        color: '#333'
    },
    itemDesText: {
        marginTop: 3,
        fontSize: 12,
        color: '#999'
    },
    sepLine: {
        width: 1,
        height: 30,
        backgroundColor: '#EFEFEF'
    },
    arrowImg: {
        width: 15,
        height: 15,
        position: 'absolute',
        right: 15,
    }
})